<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-05-27
    	描述：globalAlpha 属性和globalCompositeOperation 属性
globalAlpha 属性
定义和用法
	globalAlpha 	属性设置或返回绘图的当前透明值（alpha 或 transparency）。
	globalAlpha 	属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。
 默认值：	1.0
	JavaScript 语法：	context.globalAlpha=number;
属性值
	值					描述
	number			透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。
 globalCompositeOperation 属性
 定义和用法
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。

默认值：	source-over
JavaScript 语法：	context.globalCompositeOperation="source-in";
属性值
 		值					描述
	source-over			默认。在目标图像上显示源图像。     	||source表示后绘制的图形
	source-atop			在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
	source-in			在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
	source-out			在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
	destination-over	在源图像上方显示目标图像。		||destination  表示先绘制的图形
	destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。  
	destination-in		在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
	destination-out		在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
	lighter				显示源图像 + 目标图像。
	copy				显示源图像。忽略目标图像。
   	xor					使用异或操作对源图像与目标图像进行组合。
    -->
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
		<canvas id="canvas2" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>
		var canvas = document.getElementById("canvas");
		canvas.width=1000;
		canvas.height=400;
		var context = canvas.getContext("2d");
		context.globalAlpha=0.6;//设置透明
		for(var i =0;i<100;i++){
			var R =Math.floor(Math.random()*255);
			var G =Math.floor(Math.random()*255);
			var B =Math.floor(Math.random()*255);
	/*		1. Math.ceil()用作向上取整。
			
			2. Math.floor()用作向下取整。
			
			3. Math.round() 我们数学中常用到的四舍五入取整。*/		
			
			context.fillStyle="rgb("+R+","+G+","+B+")";//随机色
			context.beginPath();
			context.arc(Math.random()*canvas.width,Math.random()*canvas.height,Math.random()*80,0,Math.PI*2);//随机圆（圆心随机，半径0-80,0-2π表示完整的圆）
			context.fill();
		}
		/////////////////////////////////////////////////////////
		var canvas = document.getElementById("canvas2");
		canvas.width=1000;
		canvas.height=800;
		var context = canvas.getContext("2d");
		
		context.fillStyle="bisque";
		context.fillRect(100,200,400,400);//矩形
		context.globalCompositeOperation="destination-over";//遮盖方式
		
		context.fillStyle="aquamarine";
		context.beginPath();
		//三角形
		context.moveTo(400,300);
		context.lineTo(650,700);
		context.lineTo(150,700);
		context.closePath();
		context.fill();
	</script>
</html>
